<template>
  <div class="login">
    <input type="tel" v-model="userInfo.phoneNumber" placeholder="请输入11位手机号">
    <input type="password" v-model="userInfo.password" placeholder="请输入6-12位密码">
    <p>已有账户，<span>忘记密码?</span></p>
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      isdFouth: false,
      isdCouth: false,
      userInfo: {
        phoneNumber: '',
        password: '',
      }
    }
  },
  methods: {
    login () {
      let phpVerify = /^1[34578]\d{9}$/;
      if (this.userInfo.phoneNumber === '' || this.userInfo.password === '') {
        this.$notify({
          message: '请填写账户和密码',
          duration: 2000,
          background: '#1989fa',
        })
      }else if (!phpVerify.test(this.userInfo.phoneNumber)) {
        this.$notify({
          message: '手机号不合法',
          duration: 2000,
          background: '#1989fa',
        })
      }else {
        this.$request.login(this.userInfo)
          .then(res => {
            console.log(res);
            if(res.data.code === 3001){
              this.$router.push('../receive-address');
            }else if (res.data.code === 3002 || 3003) {
              this.$notify({
                message: res.data.msg,
                duration: 3000,
                background: '#1989fa',
              })
            }
          })
          .catch(error => {
            console.log(error);
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .login{
    position: relative;
    padding-left: 20px;
  }
  input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset !important;}
  input{
    width: 85%;
    height: 80px;
    margin: 5px 30px;
    border:0;
    border-bottom: 1px solid #eee;
    outline: none;
    padding-left: 20px;
  }
  button{
    width: 75%;
    height: 80px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 200px auto;
    background: #409EFF;
    border: 0;
    border-radius: 50px;
    color: white;
    font-size: 18px;
    outline: none;
    &:active{
      background: #2e8bff;
    }
  }
  .telNub{
    position: absolute;
    right: 80px;
    top: 15px;
    font-size: 12px;
    color: red;
  }
  .passMasg{
    position: absolute;
    right: 80px;
    top: 70px;
    font-size: 12px;
    color: red;
  }
  p{
    font-size: 20px;
    position: absolute;
    right: 40px;
    top: 200px;
  }
  span{
    color: #2e8bff;
  }
</style>
